<template>
  <n-layout class="n-layout-body">
    <n-layout-header :inverted="inverted" bordered>
      <div class="n-layout-header-left">
        <img src="" alt="">
        <span>{{ webTitle }}</span>
      </div>
      <div class="n-layout-header-right">
        <n-dropdown :options="headerMenu" @select="handleSelect">
          <n-avatar color="#06f" :size="48">{{userName}}</n-avatar>
        </n-dropdown>
      </div>
    </n-layout-header>

    <n-layout class="n-layout-con" has-sider>
      <n-layout-sider bordered show-trigger collapse-mode="width" :collapsed-width="64" :width="240"
        :native-scrollbar="false" :inverted="inverted">
        <n-menu default-value="work" :inverted="inverted" :collapsed-width="64" :collapsed-icon-size="22"
          :options="menuOptions" />
      </n-layout-sider>

      <n-layout-content content-style="padding: 20px;">
        <router-view></router-view>
      </n-layout-content>
    </n-layout>

    <n-layout-footer :inverted="inverted" :bordered="false">
      系统
    </n-layout-footer>
  </n-layout>
</template>

<script setup>
import { nextTick, ref } from "vue"
import { mainData } from "@/stores/index.js"
import { storeToRefs } from "pinia"
import { menuOptions, headerMenu } from "@/config/js/NaiveUIMenu.js"
import router from "@/router"
import useAxios from "@/config/js/AxiosConfig"
import { useNotification, useMessage } from "naive-ui";

let axios = useAxios()
let notification = useNotification();
let message = useMessage()

// 变量区域
let inverted = ref(false)
let piniaData = mainData()

let { webTitle, ifUserAuthority, userName } = storeToRefs(piniaData)

function handleSelect(key) {
  // console.log("怎么回事：", key);
  if (key === "logout") {
    axios.get("/users/logout")
      .then(res => {
        if (res.flag) {
          ifUserAuthority.value = false
          userName.value = null
          localStorage.removeItem("token")
          message.success(res.message);
          router.push("/login")
          nextTick()
        } else {
          ifUserAuthority.value = true
          message.error("退出账号未能成功！");
        }
      })
      .catch(err => {
        console.error(err);
      })
  } else if (key === "profile") {
    // let count = 10;
    // const n = notification.create({
    //   title: "平山道 + 雨 = 什么？",
    //   content: `你有 ${count} 秒来回答这个问题`,
    //   duration: 1e4,
    //   closable: true,
    //   onAfterEnter: () => {
    //     const minusCount = () => {
    //       count--;
    //       n.content = `你有 ${count} 秒来回答这个问题`;
    //       if (count > 0) {
    //         window.setTimeout(minusCount, 1e3);
    //       }
    //     };
    //     window.setTimeout(minusCount, 1e3);
    //   },
    // });
  }
}
</script>

<style scoped>
@import url("@/styles/ViewCss/MainView.css");
</style>